<template>
	<view v-if="chat_flag == 1">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">聊天</block></cu-custom>
		<view class="cu-chat">
			<view class="cu-item self">
				<view class="main">
					<view class="content bg-green shadow">
						<text>{{friendApply.message}}</text>
					</view>
				</view>
				<u-avatar @click="chat(friendApply.applyUserId)" :src="friendApply.applyAvatar"></u-avatar>
				<view class="date">{{friendApply.createTime}}</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view @click="copyText(friendApply.wechat)" class="content bg-green shadow">
						<text>微信号：{{friendApply.wechat}}</text>
					</view>
				</view>
				<u-avatar @click="chat(friendApply.applyUserId)" :src="friendApply.applyAvatar"></u-avatar>
				<view class="date">{{friendApply.createTime}}</view>
			</view>
			<view class="cu-info">
				平台不提供聊天服务，请添加对方微信后聊天。
			</view>
			<view class="cu-item">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view class="content shadow">
						<text>已查看你的好友申请！</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-item" v-if="friendApply.status == '2'">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view class="content shadow">
						<text>拒绝了你的好友申请！</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-item" v-if="friendApply.status == '1'">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view class="content shadow">
						<text>已通过你的好友申请！</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-item" v-if="friendApply.status == '1'">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view  @click="copyText(friendApply.contact)" class="content shadow">
						<text>微信号：{{friendApply.contact}}</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-info" v-if="friendApply.status == '1'">
				交友需谨慎，请勿涉及金钱交易，如果对方提供假的联系方式，或者存在欺诈。
				<text class="text-blue">我要举报</text>
			</view>
		</view>
		
		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input class="solid-bottom" v-model="friendApply.contact" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur"></input>
			<button class="cu-btn bg-green shadow" @click="send">同意</button>
			<button class="cu-btn bg-green shadow mg" @click="jujue">拒绝</button>
		</view>
		
		<u-modal v-model="show" show-cancel-button="true" :mask-close-able="true" :content="content" @confirm="confirm" ref="uModal" :async-close="true"></u-modal>

		<u-popup v-model="rule" mode="bottom" border-radius="14">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<rule></rule>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="rule = false;">关闭</u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import rule from "@/pages/index/rule.vue";	//申请规则
	export default {
		components: {
			rule
		},
		data() {
			return {
				content: '确认输入的微信号正确吗？',
				applyId: 0,
				show: false,
				rule: false,
				friendApply: {
					
				},
				InputBottom: 0
			};
		},
		onLoad(option) {
			this.applyId = option.applyId;
			this.init();
		},
		methods: {
			init() {
				this.$u.get('/wq/friendApply/getRoom',{
					id: this.applyId
				}).then(res => {
					this.friendApply = res.data;
				});
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			jujue() {
				this.judgeLogin((res) => {
					this.subscribeMessage(res.tmplIds);
					
					this.$u.post('/wq/friendApply/jujue',{
						id: this.applyId
					}).then(res => {
						this.init();
					});
				});
			},
			confirm() {
				this.judgeLogin((res) => {
					this.subscribeMessage(res.tmplIds);
					
					this.$u.post('/wq/friendApply/agree',{
						id: this.applyId,
						message: this.friendApply.contact,
					}).then(res => {
						this.show = false;
						this.init();
					});
				});
			},
			chat(userId) {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/center/index',
						params: {
							userId: userId,
						}
					});
				});
			},
			copyText(text){
			    uni.setClipboardData({
			        data: text ,
			        success: function (res) {
						console.log('复制的信息：',text );
						uni.showToast({
							 title: '复制成功',
						});
			        }
			    });        
			},
			send() {
				if(this.friendApply.contact == ''){
					this.$u.toast('请输入微信号');
					return;
				}
				this.show = true;
			},
			subscribeMessage(tmplIds) {
				uni.requestSubscribeMessage({
					//数组，最多放三个订阅模板的ID
					tmplIds: tmplIds,
					success: function(res) {
						console.log(JSON.stringify(res));
					},
					fail: function() {
			
					},
					complete: (res) => {
						console.log(333,res)
					}
				});
			},
		}
	}
</script>

<style>
page{
	background-color: #f1f1f1;
	padding-bottom: 100upx;
}
.text-line {
	padding: 0 5px;
}
.confrim-btn {
	padding: 15px;
}
.rank {
	color: #0081ff;
	font-weight: bolder;
	padding: 0 3px;
}
.mg {
	margin-left: 5px;
}
</style>
